{% extends "base.html" %}
{% block head %}
<script src="http://192.168.0.186/static/js/echarts.js" charset="utf-8"></script>
<link href="http://192.168.0.186/static/css/bootstrap-table.css" rel="stylesheet">
<script src="http://192.168.0.186/static/js/Bs-Table/tableExport.js"></script>
<script type="text/javascript" src="http://192.168.0.186/static/js/Bs-Table/bootstrap-table.js"></script>

{% endblock %}

{% block title %}Order{% endblock %}


{% block content %}

<div class="row">
    <div id='toolbar'>
        <form action="{% url 'show_order_2' %}" method="get">
            <label style="margin-right: 10px;margin-left: 10px">开始日期: </label><input type="date" id="begin_date" name="begin_date" value="{% if begin_date %}{{begin_date}}{% endif %}"/>
            <label style="margin-right: 10px;margin-left: 10px">结束时间: </label><input type="date" id="end_date" name="end_date" value="{% if end_date %}{{end_date}}{% endif %}"/>
            <button type="submit" class="btn-info">筛选</button>
        </form>
    </div>
    <table id="simpleTable" class="table"></table>

</div>


<div class="row">

   <!-- 图表 -->
    <div id="bar" style="height:460px;"></div>

</div>
{% endblock %}


{% block script %}

<script type="text/javascript">

    var xData = function() {
        var data = [];
        for (var i =1; i < 14; i++) {
            data.push(i + "");
        }
        return data;
    }();

option = {
    "backgroundColor": '#2c343c',
    "title": {
        x:'center',
        textStyle: {
            color: '#90979c',
        },
        text: "订单分析",
    },
    "toolbox": {
           show : true,
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
               restore : {show: true},
               saveAsImage : {show: true}
           }
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },
    "grid": {
        "borderWidth": 0,
        "top": 110,
        "bottom": 95,
        textStyle: {
            color: "#fff"
        }
    },
    "legend": {
        x: '4%',
        top: '11%',
        textStyle: {
            color: '#90979c',
        },
        "data": []
    },
     

    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "data": xData,
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "splitArea": {
            "show": false
        },

    }],
    "dataZoom": [{
        "show": true,
        "height": 30,
        "xAxisIndex": [
            0
        ],
        bottom: 30,
        "start": 10,
        "end": 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle:{
            color:"#d3dee5",
            
        },
           textStyle:{
            color:"#fff"},
           borderColor:"#90979c"
        
        
    }, {
        "type": "inside",
        "show": true,
        "height": 15,
        "start": 1,
        "end": 35
    }],
    // "series": [
    //     {
    //         "name": "新用户",
    //         "type": "bar",
    //         "stack": "总量",
    //         "itemStyle": {
    //             "normal": {
    //                 "color": "rgba(0,191,183,1)",
    //                 "barBorderRadius": 0,
    //                 "label": {
    //                     "show": true,
    //                     "position": "top",
    //                     formatter: function(p) {
    //                         return p.value > 0 ? (p.value) : '';
    //                     }
    //                 }
    //             }
    //         },
    //         "data": []
    //     }, 
    // ]
}

    var myChart = echarts.init(document.getElementById('bar'));
    myChart.setOption(option)

    function gene_order_series(data) {
        var serie = [];
        var companys = data.companys
            for(var i = 0; i < companys.length; i++){
                var item = {
                    name:companys[i],
                    type: 'bar',
                    stack: "总量",
                    barMaxWidth: 60,
                    barGap: "10%",
                    itemStyle: {
                        normal: {
                            //color: "rgba(0,191,183,1)",
                            barBorderRadius: 0,
                            label: {
                                show: true,
                                position: "insideTop",
                                textStyle: {
                                        color: "#fff"
                                },
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value): '';
                                }
                            }
                        }
                    },
                    data: data[companys[i]]
                }
                serie.push(item);
            }
        // 折线汇总
        serie.push({
               name: "总",
               type: "line",
               stack: "总量",
               symbolSize:20,
               symbol:'circle',
               itemStyle: {
                    normal: {
                       color: "rgba(252,230,48,1)",
                       barBorderRadius: 0,
                       label: {
                            "show": true,
                            "position": "top",
                            formatter: function(p) {
                                return p.value > 0 ? (p.value) : '';
                             }
                        }
                    }
                },
               data: data.total_price,

        })
        // pie比例汇总
        serie.push({
                type:'pie',
                center:['91%','30%'],
                radius:['5%','25%'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{d}%"
                },
                data:[{name: "1月",value : data.total_price[0]},
                    {name: "2月",value : data.total_price[1]},
                    {name: "3月",value : data.total_price[2]},
                    {name: "4月",value : data.total_price[3]},
                    {name: "5月",value : data.total_price[4]},
                    {name: "6月",value : data.total_price[5]},
                    {name: "7月",value : data.total_price[6]},
                    {name: "8月",value : data.total_price[7]},
                    {name: "9月",value : data.total_price[8]},
                    {name: "10月",value : data.total_price[9]},
                    {name: "11月",value : data.total_price[10]},
                    {name: "12月",value : data.total_price[11]},
                    ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 5,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }

            })
        return serie;
    }

    var get_url= 'api_order_info'
         {% if begin_date %}
             get_url += '?begin_date={{ begin_date }}'
             {% if end_date %}
               get_url += '&end_date={{ end_date }}'
             {% endif %}
         {% endif %}
    
    $.get(get_url).done(function (response) {

        $('#simpleTable').bootstrapTable('destroy').bootstrapTable({

            search: true,
            pagination: true,
            pageNumber: 1,
            pageSize: 8,
            pageList: [10, 20, 30, 50],
            cache: false,
            height:450,
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            striped: true,
            showRefresh: false,
            //sortName:'CreateTime',
            //sortOrder:'desc',
            //showColumns:true,
            toolbar: '#toolbar',
            //singleSelect: true,           // 单选checkbox
            columns: [{ checkbox: true },
            {field: '', title: '序号', sortable: true, formatter: function (value, row, index) {return index + 1;}},
            //{ field: 'id', title: 'id名称', sortable: true },
            { field: 'saler', title: '业务员', sortable: true },
            { field: 'customer', title: '客户', sortable: true },
            { field: 'state', title: '状态', sortable: true },
            { field: 'price', title: '金额', sortable: true },
            { field: 'created', title: '创建时间', sortable: true },

            ],
            showExport: true,     //下载
            exportDataType: "all",
            exportTypes: ['excel'],
            data: response.data.table_data,
        //     onClickCell: function (field, value, row, element) {

        //                lsedit_project(row.ItemID,row.id)
        //     },

        //     onRefresh: function (params) { 

        // },
        });

            // 填入数据
            myChart.setOption({
                title: {
                    subtext: '总金额：' + response.data.price
                },
                legend: {
                    data: response.data.companys
                },

                series: gene_order_series(response.data)
            });


    })

</script>
{% endblock %}